<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta content="text/html;charset=UTF-8"/>
    <title th:text="${title}"></title>
    <div th:replace="fragments/header :: css"></div>
    <div th:replace="fragments/header :: js"></div>
</head>
<body>
<div th:replace="fragments/header :: header"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="fragments/sider :: sider"></div>
        <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
            <h1 th:text="${title}"></h1>
            <div id="main" style="width: 900px;height:400px;"></div>
        </main>
    </div>
</div>
<script th:inline="javascript">
    //<![CDATA[
    //上面的注释别删，删了就跑不了了
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 新建sale与dates数组来接受数据
    var sale= [];
    var dates=[];

    //AJAX接收数据主体
    $.ajax({
        type:"GET",
        url:"/test18",
        dataType:"json",
        async:false,
        success:function (result) {


            for (var i = 0; i < result.length; i++){
                var k=dates.push(result[i].price_section);
                var j=sale.push(result[i].salenumber);
            }

        },
        error :function(errorMsg) {
            alert("获取后台数据失败！");
        }
    });

    var option = {
        backgroundColor: 'white',
        title: {
            text: '价格区间销量占比',
            left: 'center',
            top: 20,
            //textStyle: {
             //   color: '#ccc'
            //}
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {d}%"
        },
        /*
        visualMap: {
            show: false,
            min: 500,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        */
        series : [
            {
                name:'价格区间销量占比',
                type:'pie',
                clockwise:'true',
                startAngle:'0',
                radius : '60%',
                center: ['50%', '50%'],
                data:[
                    {
                        value:sale[0],
                        name:dates[0],
                        itemStyle:{
                            //normal:{
                                //color:'rgb(255,192,0)',
                                //shadowBlur:'90',
                                //shadowColor:'rgba(0,0,0,0.8)',
                                //shadowOffsetY:'30'
                            //}
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        value:sale[1],
                        name:dates[1],
                        itemStyle:{
                            normal:{
                                //color:'rgb(144，238，144)'
                            }
                        }
                    },
                    {
                        value:sale[2],
                        name:dates[2],
                        itemStyle:{
                            normal:{
                                //color:'rgb(0，0，255)'
                            }
                        }
                    },
                    {
                        value:sale[3],
                        name:dates[3],
                        itemStyle:{
                            normal:{
                                //color:'rgb(255，174，185)'
                            }
                        }
                    },
                    {
                        value:sale[4],
                        name:dates[4],
                        itemStyle:{
                            normal:{
                                //color:'rgb(138,43,226)'
                            }
                        }
                    }
                ],
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //]]>
</script>

</body>
</html>